<template>
  <div class="page">
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>
      <el-scrollbar class="page-component__scroll" style="height:100%;margin:0 100px">
        <div style="height:700px;">
          <h1 class="title">{{data.title}}</h1>
          <hr />
          <div class="taskName">
            <span class="taskName">时间:{{data.addTime}}</span>
            <span class="taskName">发布人:{{data.addUserName}}</span>
            <span class="taskName">重点工作:{{data.taskName}}</span>
          </div>
          <hr />
          <p class="cound" v-html="data.content"></p>
          <!-- <div class="file">
            <img :src="returnFile(item.name)" alt />
          </div>-->
          <div class="demo-image__preview">
            <el-image
              v-for="(item,index) in data.files"
              :key="index"
              style="width: 250px; height: 250px;margin-right:20px"
              :src="returnFile(item.name)"
              :preview-src-list="[returnFile(item.name)]"
            ></el-image>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
import configJson from "../../api/config";
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      console.log(this.$route.query.id);
      this.$axios
        .post("dailyNews/load", { id: this.$route.query.id })
        .then((res) => {
          if (res.code == 200) {
            this.data = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    returnFile(val) {
      return `${configJson.API_URL}/fileController/${val}`;
    },
  },
};
</script>

<style>
.page {
  width: 100%;
  height: 100%;
  text-align: center;
}
.title {
  height: 100px;
  padding: 20px;
}
.cound {
  min-height: 400px;
  padding: 30px;
}
.taskName {
  padding: 10px;
}
.file {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.file img {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>